<template>
  <div id="dictTable"> 
    <el-table
      
      :data="tableData"
      stripe
      border
      height="65vh"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      style="width: 100%;overflow-x: hidden;">
      <el-table-column
        prop="id"
        label="序号">
      </el-table-column>
      <el-table-column
        prop="dictCode"
        label="字典编码">
      </el-table-column>
      <el-table-column
        prop="dictName"
        label="字典名称">
      </el-table-column>

      <el-table-column
        prop="dictValue"
        label="值">
      </el-table-column>

      <el-table-column
        prop="remark"
        label="备注">
      </el-table-column>

      <el-table-column
        prop="createTime"
        :formatter="bms_short"
        label="创建时间">
      </el-table-column>
      <el-table-column
        prop="modifyTime"
        :formatter="bms_short"
        label="修改时间">
      </el-table-column>

      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>


  </div>
</template>

<script>
import { deleteDict } from '@/assets/request/api'
import tool from '@/assets/js/tool'
export default {
  name: "dictTable",
  mixins: [tool],
  props: ['tableDictData'],
  data() {
    return {
      tableData: [],
    }
  },
  methods: {
    handleClick(row) {
      this.$emit("editDict",row)
    },
    deleteDict(codeId) {
      deleteDict(codeId).then(res => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.$emit("selectDict",{})
      }).catch(err => {
        this.$message({
          type: 'error',
          message: err.message
        });
      })
    },
    deleteClick(row) {
      this.$confirm('此操作将删除字典, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteDict(row.id)        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    }
  },
  watch: {
    tableDictData: {
      deep: true,         // 深度监听
      immediate: false,    // immediate表示在watch中首次绑定的时候，是否执行handler，值为true则表示在watch中声明的时候，就立即执行handler方法，
      handler(newValue,oldValue) {
        this.tableData = newValue
        this.$emit('changeLoad',false)
      }
    },
    
  }
}
</script>

<style lang="scss" scoped>

</style>